<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";

let nameList = ["迎新晚会", "七十周年校庆", "嗨唱校园音乐晚会", "第一届社团联合会", "第十二届校园篮球赛", "轮滑社比赛", "故居打扫志愿者活动", "毕业晚会", "文化月", "百科知识竞赛"];
let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120, 150];

let colorList = ['#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0']
let fontSizeList = [12, 14, 16, 18, 20]
let data: { name: string; value: number; label: { color: string; fontSize: number; }; }[] = [];

nameList.map((item, index:number) => {
  let i = parseInt(index / 4);
  data.push(
    {
      name: item,
      value: valueList[i],
      label: {
        color: colorList[i],
        fontSize: fontSizeList[i]
      }
    }
  )
})
const option = reactive({
  color: colorList,
  series: [
    {
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 100,// 节点之间的斥力因子
        edgeLength: 0, //边的两个节点之间的距离
        layoutAnimation: true,
        friction: 0.3
      },
      roam: false,
      symbol: '',
      symbolSize: 0,
      label: {
        show: true,
        color: 'auto',
      },
      draggable: false,
      data: data
    }
  ]
});
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
